{% extends "_layouts/examples.html" %}
{% block title %}Side navigation / With icons{% endblock %}

{% block standalone_css %}patterns_side-navigation{% endblock %}

{% block content %}
<div class="p-side-navigation--icons" id="drawer">
  <button class="p-side-navigation__toggle js-drawer-toggle" aria-controls="drawer">
    Toggle side navigation
  </button>

  <div class="p-side-navigation__overlay js-drawer-toggle" aria-controls="drawer"></div>

  <nav class="p-side-navigation__drawer" aria-label="Example side navigation with icons">
    <div class="p-side-navigation__drawer-header">
      <button class="p-side-navigation__toggle--in-drawer js-drawer-toggle" aria-controls="drawer">
        Toggle side navigation
      </button>
    </div>

    <ul class="p-side-navigation__list">
      <li class="p-side-navigation__item">
        <a class="p-side-navigation__link" aria-current="page" href="#"><i class="p-icon--information p-side-navigation__icon"></i>Information</a>
      </li>
      <li class="p-side-navigation__item">
        <a class="p-side-navigation__link" href="#"><i class="p-icon--user p-side-navigation__icon"></i>Users</a>
        <ul class="p-side-navigation__list">
          <li class="p-side-navigation__item">
            <a class="p-side-navigation__link" href="#">Anna von Example</a>
          </li>
          <li class="p-side-navigation__item">
            <a class="p-side-navigation__link" href="#">Bob Anonymous</a>
          </li>
        </ul>
      </li>
      <li class="p-side-navigation__item">
        <a class="p-side-navigation__link" href="#"><i class="p-icon--help p-side-navigation__icon"></i>Get help<span class="p-side-navigation__status"><span class="p-chip--information is-readonly is-inline is-dense">Updated</span></span></a>
      </li>
    </ul>
    <ul class="p-side-navigation__list">
      <li class="p-side-navigation__item">
        <a class="p-side-navigation__link" href="#">Release notes</a>
      </li>
      <li class="p-side-navigation__item">
        <a class="p-side-navigation__link" href="#">Contribute</a>
      </li>
      <li class="p-side-navigation__item">
        <a class="p-side-navigation__link" href="#">Contact us</a>
        <ul class="p-side-navigation__list">
          <li class="p-side-navigation__item">
            <a class="p-side-navigation__link" href="#">IRC channel</a>
          </li>
          <li class="p-side-navigation__item">
            <a class="p-side-navigation__link" href="#">Discourse forum</a>
          </li>
          <li class="p-side-navigation__item">
            <a class="p-side-navigation__link" href="#">Contact form</a>
          </li>
        </ul>
      </li>
    </ul>

  </nav>
</div>

{% endblock %}

{% block script %}
<script>
    {% include "docs/examples/patterns/side-navigation/_toggle_script.js" %}
</script>
{% endblock %}
